<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>bilibili.com</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    p {
      font-size: 14px;
    }

    .container {
      height: 400px;
      width: 700px;
      border: 1px solid #eee;
      border-radius: 8px;
      margin: 50px auto;
      position: relative;
    }

    .img {
      position: absolute;
      bottom: 0;
      height: 100px;
      width: 100px;
    }

    .main {
      height: 75%;
      width: 100%;
      display: flex;
    }

    .left-main {
      width: 40%;
      height: 100%;
    }

    .center-left-main {
      height: 100%;
      width: 70%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-left: 20%;
    }

    h1 {
      text-decoration: none;
      font-size: 18px;
      font-weight: 500;
      color: #505050;
      margin-top: 12px;
    }

    .QRcode {
      width: 168px;
      height: 168px;
      margin: 20px 0;
      border: 1px solid #eee;
      border-radius: 8px;
      padding: 19px;
      position: relative;
    }

    .refresh {
      height: 30px;
      width: 30px;
      position: absolute;
      background-color: #fff;
      border-radius: 50%;
      padding: 10px;
      top: 40px;
      right: 60px;
      opacity: 0;
    }

    .right-main {
      width: 60%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .tab {
      height: 20%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .tab-left {
      padding-right: 20px;
      border-right: 1px solid #eee;
      font-size: 18px;
      color: #00a1d6;
      cursor: not-allowed;
    }

    .tab-right {
      padding-left: 20px;
      font-size: 18px;
      cursor: pointer;
    }

    .center-right-main {
      height: 80%;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      border-left: 1px solid #eee;
    }

    .input-context {
      width: 80%;
      border: 1px solid #eee;
      border-radius: 8px;
    }

    .input {
      display: flex;
    }

    .input p {
      font-size: 16px;
      padding: 10px;
    }

    .input a {
      margin-top: 10px
    }

    input {
      outline: none;
      border: none;
      background: transparent;
      font-size: 16px;
    }

    .btn {
      width: 80%;
      height: 17%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 20px 0;
    }

    .btn-item {
      width: 45%;
      height: 100%;
      border-radius: 8px;
      background: transparent;
      border: 1px solid #eee;
      cursor: pointer;
    }

    .imgs {
      width: 70%;
      height: 20%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .imgs img {
      width: 30px;
      height: 30px;
    }

    .imgs span {
      color: #9499a0;
      font-size: 13px;
    }

    .text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      line-height: 1.5;
    }

    .footer {
      height: 25%;
      width: 100%;
      color: #999;
    }

    a {
      text-decoration: none;
      color: #00a1d6;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="main">
      <div class="left-main">
        <div class="center-left-main">
          <h1>扫描二维码登录</h1>
          <div class="QRcode">
            <img src="./下载.png" alt="  ">
            <img src="./扫描二维码.png" alt="" class="refresh">
          </div>
          <div class="text">
            <p>请使用<a href="https://app.bilibili.com/?spm_id_from=333.1007.0.0">哔哩哔哩客户端</a></p>
            <p>扫码登录或扫码下载APP</p>
          </div>
        </div>
      </div>
      <div class="right-main">
        <div class="tab">
          <p class="tab-left">密码登录</p>
          <p class="tab-right">短信登录</p>
        </div>
        <div class="center-right-main">
          <div class="input-context">
            <div class="input" style="border-bottom: 1px solid #eee;">
              <p>账号</p>
              <input type="text" placeholder="请输入账号">
            </div>
            <div class="input">
              <p>密码</p>
              <input type="text" placeholder="请输入密码">
              <a>忘记密码?</a>
            </div>
          </div>
          <div class="btn">
            <button class="btn-item">注册</button>
            <button class="btn-item" style="background-color: #00a1d6; color: #fff; opacity: 0.4;">登录</button>
          </div>
          <p style="color: #9499a0;">其他登录方式</p>
          <div class="imgs">
            <img src="./微信.png" alt=""><span>微信登录</span>
            <img src="./微博.png" alt=""><span>微博登录</span>
            <img src="./QQ.png" alt=""><span>QQ登录</span>
          </div>
        </div>
      </div>
    </div>
    <div class="footer text">
      <p> 未注册过哔哩哔哩的手机号，我们将自动帮你注册账号 </p>
      <p> 登录或完成注册即代表你同意 <a href="https://www.bilibili.com/protocal/licence.html">用户协议</a>和<a
          href="https://www.bilibili.com/blackboard/privacy-pc.html">隐私条款</a> </p>
    </div>
    <img src="./左下角.png" alt="" class="img">
    <img src="./右下角.png" alt="" class="img" style="right: 0;">
  </div>
</body>
<script>
  const QR = document.querySelector('.QRcode img');
  const refresh = document.querySelector('.refresh');
  const textArr = document.querySelectorAll('.input p');
  const inputArr = document.querySelectorAll('.input input');
  const aPassword = document.querySelector('.input a');
  const tabRight = document.querySelector('.tab-right');
  const tabLeft = document.querySelector('.tab-left');
  const btn = document.querySelector('.btn');
  const btnArr = document.querySelectorAll('.btn-item');
  const opacityTimer = () => {
    setTimeout(() => {
      QR.style.opacity = 1;
      refresh.style.opacity = 1;
    }, 10000);
  }
  opacityTimer();
  refresh.addEventListener('click', () => {
    QR.style.opacity = 1;
    refresh.style.opacity = 0;
    opacityTimer();
  })
  const tabClick = () => () => {
    tabLeft.style.color = "#000"
    tabRight.style.color = "#00a1d6"
    tabLeft.style.cursor = "pointer";
    tabRight.style.cursor = "not-allowed";
    inputArr[0].placeholder = "请输入手机号";
    inputArr[1].placeholder = "请输入验证码";
    textArr[0].textContent = "手机号";
    textArr[1].textContent = "验证码";
    aPassword.textContent = "";
    btn.style.justifyContent = "center";
    btnArr[0].style.display = "none";
    btnArr[1].textContent = "登录/注册"
    btnArr[1].style.opacity = "1";

  }
  tabRight.addEventListener('click', tabClick())
  btnArr[0].addEventListener('click', tabClick())
  tabLeft.addEventListener('click', () => {
    tabLeft.style.color = "#00a1d6"
    tabRight.style.color = "#000"
    tabLeft.style.cursor = "not-allowed";
    tabRight.style.cursor = "pointer";
    inputArr[0].placeholder = "请输入账号";
    inputArr[1].placeholder = "请输入密码";
    textArr[0].textContent = "账号";
    textArr[1].textContent = "密码";
    aPassword.textContent = "忘记密码";
    btn.style.justifyContent = "space-between";
    btnArr[0].style.display = "inline-block";
    btnArr[1].textContent = "登录"
    btnArr[1].style.opacity = "0.4";
  })
</script>

</html>